<template>
  <van-tabbar route placeholder class="bottom" active-color="#0C95FE">
    <van-tabbar-item replace to="/">
      <template #icon>
        <icon-svg
          icon-class="bottom-home"
          class="icon pa-2 mt-n6 pb-0"
        ></icon-svg>
      </template>
      首页
    </van-tabbar-item>
    <van-tabbar-item replace to="/scenic/ticket">
      <template #icon>
        <icon-svg
          icon-class="bottom-scenic"
          class="icon pa-2 mt-n6 pb-0"
        ></icon-svg>
      </template>
      景区
    </van-tabbar-item>
    <van-tabbar-item replace to="/store/index" class="center">
      <template #icon>
        <icon-svg
          icon-class="bottom-shopping"
          class="icon mt-n6 pb-0"
          style="font-size: 54px; z-index: 1;"
        ></icon-svg>
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/hotel/list">
      <template #icon>
        <icon-svg
          icon-class="bottom-hotel"
          class="icon pa-2 mt-n6 pb-0"
        ></icon-svg>
      </template>
      酒店
    </van-tabbar-item>
    <van-tabbar-item replace to="/user/index" icon="friends-o">
      <template #icon>
        <icon-svg
          icon-class="bottom-user"
          class="icon pa-2 mt-n6 pb-0"
        ></icon-svg>
      </template>
      我的
    </van-tabbar-item>
  </van-tabbar>
</template>
<style lang="scss" scoped>
.bottom {
  /deep/ .van-tabbar--fixed {
    z-index: 99999;
  }
  .center {
    position: relative;
    /deep/ .van-tabbar-item__icon {
      z-index: 999;
    }
    .icon {
      background-color: #fff;
      border-radius: 50%;
      z-index: 999999;
    }
  }
}
</style>
